<template>
  <div class="common-layout">
    <el-scrollbar height="100vh">
      <!-- 顶部栏组件 -->
      <header-nav class="sticky-header" />
      <div>
        <!-- 主要路由区 -->
        <router-view />
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import HeaderNav from "@/components/header-nav.vue";
</script>
<style scoped>
.sticky-header {
  position: sticky; /* 使用 sticky 定位 */
  top: 0; /* 吸顶在页面顶部 */
  z-index: 100; /* 设置 z-index，确保组件显示在其他内容上方 */
}
</style>
